<template>
    <div class="wasteDetails warp">
        <el-card class="nameInfo_card">
            <div class="ant-card-body">
                <div class="luban-recyc-title ng-star-inserted">
                    <i class="el-icon-star-off" style="color: #f90;"></i>
                    <h2>{{objDetail.recyclingTitle}}</h2>
                </div>
                <el-row>
                    <el-col :span="8"><div>卖方：</div><div class="luban-text-overflow">{{objDetail.companyName}}</div></el-col>
                    <el-col :span="8"><div>发布时间：</div><div>{{objDetail.lastModifyTime}}</div></el-col>
                    <el-col :span="8"><div>报名截止时间：</div><div>{{objDetail.enrollDeadline}}</div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="8"><div>数量：</div><div>{{objDetail.quantity}}<span v-if="objDetail.unitName">{{objDetail.unitName}}</span></div></el-col>
                    <!-- <el-col :span="8"><div>保证金：</div><div>5000元</div></el-col> -->
                    <el-col :span="8"><div>所在地：</div><div class="luban-text-overflow">{{objDetail.provinceName+objDetail.address}}</div></el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="ant-row">
            <div class="body_content">
                <div class="ant_img">
                    <img style="width: 100%; height: 450px;" class="ng-star-inserted" :src="imgFirst.imageUrl" alt="">
                </div>
                <div>
                    <!-- 竞价 -->
                    <div v-if="objDetail.tradeType==0" class="quotation-related-info">
                        <div class="top-time">
                            <div class="status-name">
                                <span v-if="objDetail.status==1">报名中</span>
                                <span v-else-if="objDetail.status==2">进行中</span>
                                <span v-else-if="objDetail.status==3">竞价结束</span>
                                <span v-else-if="objDetail.status==4">已成交</span>
                                <span v-else-if="objDetail.status==5">已流拍</span>
                            </div>
                            <div class="time">
                                报名截止时间：{{objDetail.enrollDeadline}}
                            </div>
                        </div>
                        <div class="quotation-info">
                            <el-button type="primary" @click="goSignup(objDetail.clientCallBackUrl)">
                                <span v-if="objDetail.status==1">点击报名</span>
                                <span v-else-if="objDetail.status==2">进行中</span>
                                <span v-else-if="objDetail.status==3">竞价结束</span>
                                <span v-else-if="objDetail.status==4">已成交</span>
                                <span v-else-if="objDetail.status==5">已流拍</span>
                            </el-button>
                        </div>
                    </div>
                    <!-- 询价 -->
                    <div v-else class="ant-col">
                        <div class="money_one">
                            <div class="time_one">
                                距离报价截止 {{objDetail.enrollDeadline}} 还剩
                            </div>
                            <div class="timeNum_box">
                                <span class="dhmsTime">{{ddCountDown}}</span>
                                <span class="units">天</span>
                                <span class="dhmsTime">{{hhCountDown}}</span>
                                <span class="units">时</span>
                                <span class="dhmsTime">{{mmCountDown}}</span>
                                <span class="units">分</span>
                                <span class="dhmsTime">{{ssCountDown}}</span>
                                <span class="units">秒</span>
                            </div>
                            <el-button type="primary" @click="goSignup(objDetail.clientCallBackUrl)">点击报名</el-button>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="lunbo_img">
                <div class="pic_list">
                    <i @click="go(1)" class="el-icon-arrow-left left_btn"></i>
                    <div class="pic_con">
                        <ul class="pic_ul" :style="changePic">
                            <li v-for="(val,i) in imgList" :key="i" @click="imageShow(i)"> 
                                <div class="img_box">
                                    <img :src="val.imageUrl"/>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <i @click="go(-1)" class="el-icon-arrow-right right_btn"></i>
                </div>
            </div>
        </el-card>


        <!-- <el-card class="tableList">
            <el-tabs v-model="activeName">
                <el-tab-pane label="标的信息" name="1">
                    <div>
                        <h3 style="margin: 10px 0;">标的描述</h3>
                        <div>{{objDetail.productDescription}}</div>
                    </div>
                    <div class="imageList_box">
                        <h3 style="margin: 10px 0;">标的详情</h3>
                        <img v-for="(item,i) in imgList" :key="i" :src="item.imageUrl" style="height: auto; width: 100%;"/>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card> -->
    </div>
</template>
 <script>
 import {detailsInterfaceDocking} from '@/api/interface'
 import {getUserInfoID,setMinutes,timeInter} from '@/utils/auth'
    export default{
        name:'wasteDetails',
        data(){
            return{
                activeName:'1',
                objDetail:'',
                imgList:[],
                imgFirst:'',
                uid:'',
                ddCountDown:null,
                hhCountDown:null,
                mmCountDown:null,
                ssCountDown:null,
                index: 0, //现在是第几张
                width: 0, //移动的长度
            }
        },
        computed: {
            changePic() {
                return {
                transform: `translate3d(${this.width}px, 0, 0)`, //主要实现核心
                };
            },
        },
        created(){
            this.$emit('public_header',  {header:true,footer:true});
            var info = getUserInfoID();
            if(info){
                this.uid = JSON.parse(info).id;
            }else{
                this.uid = '';
            }
            var currentId = this.$route.query.id;
            this.getDataDetail(currentId);
        },
        methods:{
            getDataDetail(ids){
                detailsInterfaceDocking({id:ids}).then(res=>{
                    this.objDetail = res.data;
                    this.imgList = res.data.imageList;
                    this.imgFirst = res.data.imageList[0];
                    if(this.objDetail.tradeType==1){
                        this.endCountdown();
                    }
                   
                });
            },
            goSignup(url){
                window.open(url+'河北一盟拍卖有限公司',"_blank");
                // if(this.uid){
                //     window.open(url+'hebeiyimengpaimaiyouxiangongsi',"_blank");

                // }else{
                //     this.$message({
                //         message: '请先登录',
                //         type: 'warning'
                //     });
                //     this.$router.push({path:'/login'});
                // }
            },
            imageShow(i){
                this.imgFirst = this.imgList[i];
            },
            endCountdown(){
                var t1 = new Date().getTime();
                var nowTime = parseInt(t1.toString().substring(0,10));
                // var date = new Date(this.objDetail.enrollDeadline);
                var date = new Date('2024-06-20 23:12:02');
                var t2 = Date.parse(date);
                var endTime = parseInt(t2.toString().substring(0,10));
                var second = endTime-nowTime;
                if(second>0){
                    this._interval = setInterval(() => {
                        second--;
                        var times = setMinutes(second);
                        this.ddCountDown = times.day;
                        this.hhCountDown = times.hr;
                        this.mmCountDown = times.min;
                        this.ssCountDown = times.sec;
                        if(second<1){
                            this.ddCountDown = '00';
							this.hhCountDown = '00';
							this.mmCountDown = '00';
							this.ssCountDown = '00';
                        }
                    },1000);
                    
                }else{
                    this.ddCountDown = '00';
                    this.hhCountDown = '00';
                    this.mmCountDown = '00';
                    this.ssCountDown = '00';
                }
                
            },
            go(direc) {
                if (direc == -1) {
                this.index = this.index >= this.imgList.length - 1 ? 0 : this.index + 1;
                } else if (direc == 1) {
                this.index = this.index <= 0 ? this.imgList.length - 1 : this.index - 1;
                }
                // console.log("index:", this.index);
                this.move(); //移动
            },
            move() {
                this.width = -148 * this.index;
                // console.log("width:", this.width);
            },
        }
    }
</script>
<style lang="less" scoped>
.wasteDetails{
    .luban-text-overflow{
        // display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: keep-all;
    }
    .nameInfo_card{
        margin-top: 20px;
        .ant-card-body{
            .luban-recyc-title{
                display: flex;
                align-items: center;
                .el-icon-star-off{
                    font-size: 28px;
                    margin-right: 6px;
                }
            }
            .el-row{
                font-size: 14px;
                color: #606266;
                line-height: 40px;
                .el-col{
                    display: flex;
                    align-items: center;
                    div{
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    .ant-row{
        margin: 20px 0;
       
        /deep/.el-card__body{
            padding: 10px;
        }
            
        .body_content{
            display: flex;
            align-items: center;
            height: 470px;
            .ant_img{
                width: 580px;
                height: 450px;
                img{
                    object-fit: cover;
                }
            }
            .ant-col{
                width: 590px;
                height: 450px;
                margin-left: 10px;
                background: rgb(253, 244, 245);
                display: flex;
                align-items: center;
                justify-content: center;
                .money_one{
                    text-align: center;
                }
                .time_one{
                    padding-bottom: 40px;
                }
                .timeNum_box{
                    padding-bottom: 40px;
                    .dhmsTime{
                        display: inline-block;
                        width: 70px;
                        height: 70px;
                        line-height: 70px;
                        text-align: center;
                        font-size: 30px;
                        font-weight: 600;
                        border-radius: 6px;
                        background-color: #fff;
                        color: #127fff;
                    }
                    .units{
                        font-size: 14px;
                        padding: 0 10px;
                        color: #67a8e9;
                    }
                }
            }
            .quotation-related-info{
                width: 590px;
                height: 450px;
                margin-left: 10px;
                .top-time{
                    height: 35px;
                    line-height: 35px;
                    background-color: #409EFF;
                    color: #fff;
                    padding: 0 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .quotation-info{
                    height: calc(100% - 35px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
         .lunbo_img{
            .pic_list{
                width: 410px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top:10px;
                padding: 5px;
                .pic_con{
                    width: 700px;
                    overflow:hidden;
                    margin: 0 13px;
                    .pic_ul{
                        display: flex;
                        height: 124px;
                        line-height: 124px;
                        transition: 0.5s ease;
                        li{
                            padding: 5px;
                            height: 124px;
                            .img_box{
                                display: block;
                                width: 140px; 
                                height: 110px;
                                // overflow: hidden;
                                img{
                                    width: 100%;
                                    height: 100%;
                                    object-fit: contain;
                                }
                                video{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
                .left_btn{
                    font-size: 40px;
                    color: #ccc;
                }
                .right_btn{
                    font-size: 40px;
                    color: #ccc;
                }
            }
         }   
    }
    // 标的信息 竞买须知
    .tableList{
        /deep/.el-tabs{
            .el-tabs__header{
                .el-tabs__nav-wrap::after {
                    background-color: #e50012;
                }
                .el-tabs__item{
                    padding: 0 20px;
                    font-weight: 600;
                    font-size: 16px;
                }
                .el-tabs__item:hover {
                    background-color: #e50012;
                    color: #fff;
                }
                .is-active{
                    background-color: #e50012;
                    color: #fff;
                }
            }
            .el-tabs__active-bar{
                background-color: #e50012;
            }
        }
    }
}
</style>